doctype html
html
  head
    meta charset='UTF-8'
    meta http-equiv='X-UA-Compatible' content='IE=edge'
    meta name='viewport' content='width=device-width, initial-scale=1.0'
    title Invoice
  body
    css:
      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 100;
        font-display: swap;
        src: local("Inter-Thin");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 100;
        font-display: swap;
        src: local("Inter-ThinItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 200;
        font-display: swap;
        src: local("Inter-ExtraLight");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 200;
        font-display: swap;
        src: local("Inter-ExtraLightItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 300;
        font-display: swap;
        src: local("Inter-Light");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 300;
        font-display: swap;
        src: local("Inter-LightItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 400;
        font-display: swap;
        src: local("Inter-Regular");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 400;
        font-display: swap;
        src: local("Inter-Italic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 500;
        font-display: swap;
        src: local("Inter-Medium");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 500;
        font-display: swap;
        src: local("Inter-MediumItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 600;
        font-display: swap;
        src: local("Inter-SemiBold");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 600;
        font-display: swap;
        src: local("Inter-SemiBoldItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 700;
        font-display: swap;
        src: local("Inter-Bold");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 700;
        font-display: swap;
        src: local("Inter-BoldItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 800;
        font-display: swap;
        src: local("Inter-ExtraBold");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 800;
        font-display: swap;
        src: local("Inter-ExtraBoldItalic");
      }

      @font-face {
        font-family: 'Inter';
        font-style:  normal;
        font-weight: 900;
        font-display: swap;
        src: local("Inter-Black");
      }
      @font-face {
        font-family: 'Inter';
        font-style:  italic;
        font-weight: 900;
        font-display: swap;
        src: local("Inter-BlackItalic");
      }


      /* ----------------------- variable ----------------------- */

      @font-face {
        font-family: 'Inter var';
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: local('Inter-roman') format('woff2');
        font-named-instance: 'Regular';
      }

      @font-face {
        font-family: 'Inter var';
        font-style: italic;
        font-weight: 100 900;
        font-display: swap;
        src: local('Inter-italic') format('woff2');
        font-named-instance: 'Italic';
      }
      h1, h2, p { margin: 0; padding: 0; }
      html { font-family: Inter, sans-serif; }
      h1 { color: #19212e; font-weight: 700; font-size: 24px; line-height: 32px; }
      h2 {
        color: #19212e;
        font-weight: 700;
        font-size: 18px;
        line-height: 24px;
      }
      .body-1 {
        color: #19212e;
        font-weight: 600;
        font-size: 10px;
        line-height: 16px;
      }
      .body-2 {
        color: #19212e;
        font-weight: 400;
        font-size: 10px;
        line-height: 16px;
      }
      .body-3 {
        color: #66758f;
        font-weight: 400;
        font-size: 9px;
        line-height: 16px;
      }

      .mb-4 {
        margin-bottom: 4px;
      }
      .mb-24 {
        margin-bottom: 24px;
      }

      .overflow-auto {
        overflow: auto;
      }
      tr {
        break-inside: avoid;
      }

      .invoice-title {
        display: inline;
      }
      .header-logo {
        float: right;
        max-height: 32px;
      }

      .invoice-information-column {
        float: left;
        width: 50%;
      }
      .invoice-information-table tr td:first-child {
        padding: 0 16px 0 0;
      }
      .invoice-information-table tr td:last-child {
        width: 55%;
      }
      .invoice-information-table, tr td{
        text-wrap: normal;
        word-wrap: break-word;
        vertical-align: top;
      }
      .invoice-information-table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
      }

      .billing-information-column {
        float: left;
        width: 50%;
      }

      .invoice-resume-table tr:first-child td {
        color: #66758F;
      }
      .invoice-resume-table td {
        padding-top: 8px;
        padding-bottom: 8px;
      }
      .invoice-resume-table td:first-child {
        width: 50%;
      }
      .invoice-resume-table td:nth-child(2) {
        width: 14%;
      }
      .invoice-resume-table td:nth-child(3) {
        width: 18%;
      }
      .invoice-resume-table td:nth-child(4) {
        width: 18%;
      }
      .invoice-resume-table tr td:last-child {
        text-align: right;
      }
      .invoice-resume-table tr {
        border-bottom: 1px solid #D9DEE7;
      }
      .invoice-resume table {
        border-collapse: collapse;
      }
      .invoice-resume .total-table tr td {
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: right;
      }
      .invoice-resume .total-table td:first-child {
        width: 50%;
      }
      .invoice-resume .total-table tr:not(:last-child) td:nth-child(2) {
        border-bottom: 1px solid #D9DEE7;
        text-align: left;
        width: 25%;
      }
      .invoice-resume .total-table tr:not(:last-child) td:nth-child(3) {
        border-bottom: 1px solid #D9DEE7;
        text-align: right;
        width: 25%;
      }
      .invoice-resume .total-table tr:last-child td:nth-child(2) {
        text-align: left;
        width: 25%;
      }
      .invoice-resume .total-table tr:last-child td:nth-child(3) {
        text-align: right;
        width: 25%;
      }

      .invoice-details-title {
        page-break-before: always;
      }

      .breakdown-details table {
        border-collapse: collapse;
      }
      .breakdown-details-table tr td {
        padding-bottom: 12px;
      }
      .breakdown-details-table tr td:last-child {
        text-align: right;
      }
      .breakdown-details-table tr:last-child td {
        border-bottom: 1px solid #d9dee7;
        padding-bottom: 24px;
      }

      .powered-by {
        width: 100%;
        text-align: right;
      }
      .powered-by span {
        color: #8c95a6;
      }
      .powered-by img {
        width: 37px;
        height: 11px;
        vertical-align: middle;
        margin-top: 2px;
      }
      .alert {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 16px;
        gap: 16px;
        background: #F3F4F6;
        border-radius: 12px;
      }

    .wrapper
      .mb-24
        h1.invoice-title = document_invoice_name
        - if billing_entity.logo.present?
          img.header-logo src="data:#{billing_entity.logo.content_type};base64,#{billing_entity.base64_logo}"

      .mb-24.overflow-auto
        .invoice-information-column
          table.invoice-information-table
            tr
              td.body-1 = I18n.t('invoice.invoice_number')
              td.body-2 = number
            tr
              td.body-1 = I18n.t('invoice.issue_date')
              td.body-2 = I18n.l(issuing_date, format: :default)
            tr
              td.body-1 = I18n.t('invoice.payment_term')
              td.body-2 = I18n.t('invoice.payment_term_days', net_payment_term:)
        .invoice-information-column
          table.invoice-information-table
            - if customer.metadata.displayable.any?
              - customer.metadata.displayable.order(created_at: :asc).each do |metadata|
                tr
                  td.body-1 = metadata.key
                  td.body-2 = metadata.value

      .mb-24.overflow-auto
        .billing-information-column
          .body-1 = I18n.t('invoice.bill_from')
          .body-2
            - if billing_entity.legal_name.present?
              | #{billing_entity.legal_name}
            - else
              | #{billing_entity.name}
          - if billing_entity.legal_number.present?
            .body-2 #{billing_entity.legal_number}
          .body-2 = billing_entity.address_line1
          .body-2 = billing_entity.address_line2
          .body-2
            span
              = billing_entity.zipcode
            - if billing_entity.zipcode.present? && billing_entity.city.present?
              span
                | , &nbsp;
            span
              = billing_entity.city
          - if billing_entity.state.present?
            .body-2 = billing_entity.state
          .body-2 = ISO3166::Country.new(billing_entity.country)&.common_name
          .body-2 = billing_entity.email
          - if billing_entity.tax_identification_number.present?
            .body-2 = I18n.t('invoice.tax_identification_number', tax_identification_number: billing_entity.tax_identification_number)
        .billing-information-column
          .body-1 = I18n.t('invoice.bill_to')
          .body-2 = customer.display_name
          - if customer.legal_number.present?
            .body-2 #{customer.legal_number}
          .body-2 = customer.address_line1
          .body-2 = customer.address_line2
          .body-2
            span
              = customer.zipcode
            - if customer.zipcode.present? && customer.city.present?
              span
                | , &nbsp;
            span
              = customer.city
          .body-2 = customer.state
          .body-2 = ISO3166::Country.new(customer.country)&.common_name
          .body-2 = customer.email
          - if customer.tax_identification_number.present?
            .body-2 = I18n.t('invoice.tax_identification_number', tax_identification_number: customer.tax_identification_number)

      .mb-24
        h2.title-2.mb-4 = MoneyHelper.format(total_amount)
        .body-1 = advance_charges? ? I18n.t('invoice.already_paid') : I18n.t('invoice.due_date', date: I18n.l(payment_due_date, format: :default))

      .invoice-resume.mb-24.overflow-auto
        table.invoice-resume-table width="100%"
          tr
            td.body-2 = I18n.t('invoice.item')
            td.body-2 = I18n.t('invoice.unit')
            td.body-2 = I18n.t('invoice.tax_rate')
            td.body-2 = I18n.t('invoice.amount_without_tax')
          - fees.each do |fee|
            tr
              - if fee.charge.prorated?
                - pay_in_advance_range = charge_pay_in_advance_proration_range(fee, invoice_subscription(fee.subscription.id).timestamp)
                td
                  .body-1 = fee.invoice_name
                  .body-3 = I18n.t('invoice.breakdown_for_days', breakdown_duration: pay_in_advance_range[:number_of_days], breakdown_total_duration: pay_in_advance_range[:period_duration])
              - else
                td
                  .body-1 = fee.invoice_name
              td.body-2 = fee.units
              td.body-2 == TaxHelper.applied_taxes(fee)
              td.body-2 = MoneyHelper.format(fee.amount)

        table.total-table width="100%"
          - if coupons_amount_cents.positive?
            - credits.coupon_kind.order(created_at: :asc).each do |credit|
              tr
                td.body-2
                td.body-2 #{credit.invoice_coupon_display_name}
                td.body-2 = '-' +  MoneyHelper.format(credit.amount)
          tr
            td.body-2
            td.body-2 = I18n.t('invoice.sub_total_without_tax')
            td.body-2 = MoneyHelper.format(sub_total_excluding_taxes_amount)
          - if applied_taxes.present?
            - applied_taxes.order(tax_rate: :desc).each do |applied_tax|
              tr
                td.body-2
                td.body-2 = I18n.t('invoice.tax_name', name: applied_tax.tax_name, rate: applied_tax.tax_rate, amount: MoneyHelper.format(applied_tax.fees_amount))
                td.body-2 = MoneyHelper.format(applied_tax.amount)
          - else
            tr
              td.body-2
              td.body-2 = I18n.t('invoice.tax_name_with_details', name: 'Tax', rate: 0)
              td.body-2 = MoneyHelper.format(0.to_money(currency))
          tr
            td.body-2
            td.body-2 = I18n.t('invoice.sub_total_with_tax')
            td.body-2 = MoneyHelper.format(sub_total_including_taxes_amount)
          - if credits.credit_note_kind.any?
            tr
              td.body-2
              td.body-2 = I18n.t('invoice.credit_notes')
              td.body-2 = '-' +  MoneyHelper.format(credit_notes_amount)
          - if wallet_transactions.exists?
            tr
              td.body-2
              td.body-2 = I18n.t('invoice.prepaid_credits')
              td.body-2 = '-' + MoneyHelper.format(prepaid_credit_amount)
          tr
            td.body-2
            td.body-1 = advance_charges? ? I18n.t('invoice.already_paid') : I18n.t('invoice.total_due')
            td.body-1 = MoneyHelper.format(total_amount)


      - if applied_invoice_custom_sections.present?
        == SlimHelper.render('templates/invoices/v3/_custom_sections', self)
      p.body-3.mb-24 = LineBreakHelper.break_lines(billing_entity.invoice_footer)

      .powered-by
        span.body-2
          | #{I18n.t('invoice.powered_by')} &nbsp;
        img src="#{::SlimHelper::PDF_LOGO_FILENAME}" alt="Lago Logo"
